<!--
 * @Author: your name
 * @Date: 2020-09-01 21:27:53
 * @LastEditTime: 2020-09-02 01:04:12
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \data-paltform\src\views\components\DataExploration\DEHome.vue
-->
<template>
  <div>
    <div style="margin-bottom: 20px;background-color: #ffffff;padding: 24px;">
      <div style="display: flex;">
        <h4>首页</h4>
      </div>
      <div style="display: flex;">
        <a-breadcrumb>
          <a-breadcrumb-item>数据探索</a-breadcrumb-item>
          <a-breadcrumb-item>首页</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
    </div>
    <div style="padding: 24px;">
      <div style="margin-bottom: 10px;">
        <div style="display: flex;">
          <h4>为您找到相关搜索约{{ count }}个："{{ searchText }}"</h4>
        </div>
        <div style="display: flex;">
          <span>搜索用时:{{ time }}</span>
        </div>
        <a-input-search
          placeholder="输入查找内容"
          @search="onSearch"
          v-model="searchText"
          size="large"
        ></a-input-search>
      </div>
      <a-list
        item-layout="horizontal"
        :data-source="listData"
        :pagination="pagination"
      >
        <a-list-item slot="renderItem" slot-scope="item">
          <a-list-item-meta description="item.comment">
            <a slot="title" href="#">{{ item.title }}</a>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DEHome',
  data() {
    return {
      listData: [],
      pagination: {
        onChange: page => {
          console.log(page)
        },
        pageSize: 10
      },
      count: 0,
      searchText: '',
      time: 0
    }
  },
  mounted() {
    this.listData = this.getData()
  },
  methods: {
    getData() {
      let temp = []
      for (let i = 0; i < 100; i++) {
        temp.push({
          title: '测试数据文章标题' + i,
          comment: '这就是一堆测试数据'
        })
      }
      return temp
    },
    onSearch(value) {
      console.log(value)
      let tempTime = new Date()
      if (!value) {
        this.listData = this.getData()
      } else {
        this.listData = this.listData.filter(
          item => item.title.indexOf(value) >= 0
        )
      }
      this.time = new Date().getTime() - tempTime.getTime()
    }
  }
}
</script>
<style lang="less" scoped>
.ant-list-item-meta-content {
  text-align: left;
}

h4 {
  font-size: 20px;
}
</style>
